
import { CloseOutlined } from '@ant-design/icons';
import { Button, Drawer, Form, Input, Radio, Select, Space, Spin, Switch } from 'antd';
import { useEffect } from 'react';

import hooks from '../../hooks';
import MenuTreeSearch from '../MenuTreeSearch';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};

const titles = {
  add: '新增角色',
  edit: '编辑角色',
};

export default function EditModal() {
  const {
    editHooks: { modal, onClose, editForm, onSubmit, submitLoading, menuTreeHooks },
    tableHooks,
  } = hooks.useContainer();
  const { roleTree, checkedKeys, setCheckedKeys } = menuTreeHooks;
  const { TextArea } = Input;

  return (
    <Drawer
      title={titles[modal.type]}
      width={700}
      open={modal.type !== 'detail' && modal.open}
      footer={
        <Space>
          <Button
            type="primary"
            onClick={async () => {
              await onSubmit();
              tableHooks.refresh();
            }}
            loading={submitLoading}
          >
            保存
          </Button>
          <Button onClick={onClose}>关闭</Button>
        </Space>
      }
      extra={<CloseOutlined onClick={onClose} />}
      closable={false}
      onClose={onClose}
    >
      {modal.loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '100px 0' }}>
          <Spin />
        </div>
      ) : (
        <>
          <h3>基本信息</h3>
          <Form {...layout} form={editForm} labelAlign="left">
            {/* <Form.Item name="roleCode" noStyle hidden>
              <Input />
            </Form.Item> */}
            <Form.Item
              name="name"
              label="角色名称"
              rules={[{ required: true, message: '请输入角色名称' }]}
            >
              <Input placeholder="请输入" maxLength={100} disabled={modal.data?.name === 'admin'} />
            </Form.Item>
            <Form.Item name="description" label="角色描述">
              <TextArea placeholder="请输入" maxLength={200} />
            </Form.Item>
            <Form.Item name="status" label="角色状态" valuePropName="checked" initialValue={true}>
              <Switch disabled={modal.data?.name === 'admin'} />
            </Form.Item>
            <h3>配置权限</h3>
            <Form.Item name="permissionList" rules={[{ required: true, message: '请配置权限' }]}>
              <MenuTreeSearch
                data={roleTree.data}
                checkedKeys={checkedKeys}
                setCheckedKeys={setCheckedKeys}
              />
            </Form.Item>
            {/* <Form.Item
              name="defaultUrlMenuId"
              label="默认页面"
              rules={[{ required: true, message: '请选择默认页面' }]}
            >
              <Select notFoundContent={<span>请先配置权限</span>} placeholder="请选择">
                {defaultPageList?.map((item) => (
                  <Option key={item.key} value={item.key + ''}>
                    {item.title}
                  </Option>
                ))}
              </Select>
            </Form.Item> */}
          </Form>
        </>
      )}
    </Drawer>
  );
}
